<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录-网易考拉</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" type="text/css" href="../css/verify.css">
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/verify.js"></script>
    <script src="../js/login.js"></script>
    

</head>

<body>
    <div class="box">
        <div class="header">
            <a href="https://www.kaola.com" title="网易考拉"></a>
            <div class="header-right"></div>
        </div>
        <div class="main">
            <a href="https://pages.kaola.com/pages/activity/0b4317da69e04c6ea6babc88b1917876.shtml?from=login"></a>
            <div class="login-ul">
                <div class="login-ul-top">
                    <div class="color">欢迎登录</div>
                    <span>|</span>
                    <div>邮箱登录</div>
                </div>

                <div class="login-ul-bottom">
                    <div class="log-type">
                        <span class="log-position1"></span>
                        <a id="ver-password">使用密码验证登录</a>
                    </div>
                    <div class="reg-phone log-phone" id="reg-com">
                        <a id="reg-icon"></a>
                        <input type="text" id="phoneID" placeholder="请输入手机号码">
                        <p class="pho-message"></p>
                        <span class="log-phone-icon"></span>
                    </div>

                    <div id="mpanel4">
                    </div>

                    <div class="phone-ver" id="reg-com">
                        <input type="text" placeholder="请输入短信验证码" id="phone-vernum">
                        <a class="get-phonever">获取验证码</a>
                    </div>
                    <div class="reg-btn log-btn">
                        <a class="login-btn">登录</a>
                    </div>
                    <div class="reg-password log-password" id="reg-com">
                        <a id="reg-icon"></a>
                        <input type="text" placeholder="请输入密码">
                        <span class="reg-passwordver">123</span>
                    </div>
                    <div class="freelogin">
                        <input type="checkbox" name="" id="protocol">
                        <span>十天免登录</span>
                        <a href="https://aq.reg.163.com/ydaq/offline">遇到问题?</a>
                    </div>
                    <div class="log-privat">
                        <span>登录即代表您已同意</span>
                        <a href="https://you.kaola.com/common/page.html?key=Privacy_policy">"隐私权相关政策"</a>
                    </div>
                    <div class="log-icon">
                        <p></p>
                        <p></p>
                        <p></p>
                        <p></p>
                        <a href="./register.html">手机快捷注册
                            <span></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">

        </div>
    </div>
    <script>
      $('#mpanel4').slideVerify({
        type: 2, //类型
        vOffset: 5, //误差量，根据需求自行调整
        vSpace: 5, //间隔
        imgName: ['1.jpg', '2.jpg', "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"],
        imgSize: {
            width: '270px',
            height: '160px',
        },
        blockSize: {
            width: '40px',
            height: '40px',
        },
        barSize: {
            width: '270px',
            height: '30px',
        },
        ready: function () {},
        success: function () {
            $(".verify-img-panel").addClass("active")
            //......后续操作
        },
        error: function () {
            //		        	alert('验证失败！');
        }
        
    });
    </script>
</body>

</html>